<template>
  <div class="cell-data app-container tab-own">
    <div class="bor-bot">组件通信</div>
    <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
      <el-tab-pane
        :key="item.name"
        v-for="(item, i) in editableTabs"
        :label="item.title"
        :name="item.name"
      >
        <components :is="components.length + 1 > Number(editableTabsValue) ? components[i] : components[1]"></components>
      </el-tab-pane>
    </el-tabs>
    <pre>
      父子通信：
        父向子传递数据是通过 props，子向父是通过 events（$emit）；
        通过父链 / 子链也可以通信（$parent / $children）；
        ref 也可以访问组件实例；
        provide / inject API；
        $attrs/$listeners
      兄弟通信：
        Bus；Vuex
      跨级通信：
        Bus；Vuex；provide / inject API、$attrs/$listeners
    </pre>
  </div>
</template>
 
<script>
import attrsListeners from './attrsListeners/parent'
// const Event = new Vue() + Event.$emit/$On
import newBus from './newBus/parent' 
import propsEmit from './propsEmit/parent'
import parentChildren from './parentChildren/parent'
import provideInject from './provideInject/parent'
import storeVuex from './storeVuex/parent'
export default {
  name: 'communicationComponent',
  components: { 
    propsEmit, newBus, storeVuex, parentChildren, attrsListeners, provideInject
  },
  data () {
    return {
      components: [
        'propsEmit',
        'newBus',
        'storeVuex',
        'parentChildren',
        'attrsListeners',
        'provideInject'
      ],
      editableTabsValue: '2',
      editableTabs: [
        {
          title: 'propsEmit',
          name: '1',
          content: 'Tab 1 content'
        }, 
        {title: 'newBus', name: '2', content: 'Tab 2 content'},
        {title: 'storeVuex', name: '3'},
        {title: 'parentChildren', name: '4'},
        {title: 'attrsListeners', name: '5'},
        {title: 'provideInject', name: '6'},
        {title: 'Tab 7', name: '7'},
        // {title: 'Tab ', name: ''},
      ],
      tabIndex: 2
    }
  },
  methods: {
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        this.tabIndex = this.tabIndex < this.editableTabs.length ? this.editableTabs.length : this.tabIndex 
        let newTabName = ++this.tabIndex + '';
        // console.log(newTabName)
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          // content: 'New Tab content'
        });
        this.editableTabsValue = newTabName;
      }
      if (action === 'remove') {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    }
  },
  created() {
    // console.log('ssss')
    // this.$message('ssss')
  }
}
</script>
 
<style scoped lang="scss">
 
</style>